<dom-module id="templategoods-category-list-vertical">
    <template>
        <style>
            :host{
                display: block;
                width: 100%;
                
            }
            iron-image{
                display: block;
            }
            h3{
                margin: 0px;
                padding: 0px;
                font-size: 18px;
            }
            .category{
                margin-bottom: 10px;
                position: relative;
            }
            .category:last-of-type{
                margin-bottom: 0px;
            }
            .category .action{
                position: absolute;
                bottom: 0px;
                display: flex;
                justify-content:space-between;
                align-items:center;
                background-color: rgba(255,255,255,0.75);
                padding: 10px;
                width: 100%;
                color: #444;
                box-sizing: border-box;
            }
            paper-button{
                background-color: #000;
                color: #fff;
                --paper-button-ink-color:#fff;
                margin: 0px;
                font-size: 14px;
            }
        </style>
        <iron-media-query query="max-width:750px" query-matches="{{smallScreen}}"></iron-media-query>
        <iron-ajax auto url="{{context.httpHost}}/plugin/api/product.category.list?app_id={{context.appId}}" last-response="{{categories}}"></iron-ajax>
        <template is="dom-repeat" items="{{categories.result}}" as="category">
            <div class="category">
                <a href="{{context.rootPath}}product/{{category.id}}">
                    <template is="dom-if" if="{{smallScreen}}">
                        <iron-image sizing="cover" preload fade style="width:100%;height:{{_getCoverHeight()}}px" src="{{category.pic}}?imageView2/1/w/800/h/450"></iron-image>
                    </template>
                    <template is="dom-if" if="{{!smallScreen}}">
                        <iron-image sizing="cover" preload fade style="width:100%;height:{{_getCoverHeight()}}px" src="{{category.pic}}?imageView2/1/w/1920/h/1080"></iron-image>
                    </template>
                </a>
                <div class="action" href="{{context.rootPath}}product/{{category.id}}">
                    <h3>{{category.name}}</h3>
                    <a href="{{context.rootPath}}product/{{category.id}}">
                        <paper-button>立即选购</paper-button>
                    </a>
                </div>
            </div>
        </template>
    </template>
    <script>
        class TemplateGoodsCategoryListVertical extends Polymer.Element{
            static get is(){
                return "templategoods-category-list-vertical";
            }
            static get properties(){
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            ready(){
                super.ready();
            }
            _getCoverHeight(){
                return this.offsetWidth/1.3333;
            }
            _visibleChanged(visible){
                
            }
        }
        customElements.define(TemplateGoodsCategoryListVertical.is, TemplateGoodsCategoryListVertical);
    </script>
</dom-module>